<template>
    数据初始化界面
</template>
<script setup>

import { ref, onMounted } from "vue";
import Http from "../api/http";

onMounted(() => {
  initData();
});

const initData = () => {
  let initData = [
    {
      id: null,
      storeIndex: 1,
      name: "view1",
      path: "./visualization/view1.vue",
      bgPath: "./visualization/bg/view1_a.vue",
      containerStyle:
        "height:300px;width:30%;overflow:hidden;position:absolute;top:80px;left:0;z-index:10;",
      chartStyle: "width: 90%; height: 80%;",      
      containerStyle2:
        "height:300px;width:30%;overflow:hidden;position:absolute;top:80px;left:0;z-index:10;",
      chartStyle2: "width: 90%; height: 80%;",
      remart: "left",
      category: "A",
    },
    {
      id: null,
      storeIndex: 3,
      name: "view3",
      path: "./visualization/view3.vue",
      bgPath: "./visualization/bg/view3_a.vue",
      containerStyle:
        "height:300px;width:30%;overflow:hidden;overflow:hidden;position:absolute;top:380px;left:0;z-index:10;",
      chartStyle: "width: 80%; height: 55%;",
      containerStyle2:
        "height:300px;width:30%;overflow:hidden;overflow:hidden;position:absolute;top:380px;left:0;z-index:10;",
      chartStyle2: "width: 80%; height: 55%;",
      remart: "left",
      category: "A",
    },
    {
      id: null,
      storeIndex: 3,
      name: "left3",
      path: "./visualization/left3.vue",
      bgPath: "./visualization/bg/left3.vue",
      containerStyle:
        "height:400px;width:30%;position:absolute;top:680px;left:0;z-index:10;",
      chartStyle: "width: 80%; height: 80%;display:none;",
      containerStyle2:
        "height:400px;width:30%;position:absolute;top:680px;left:0;z-index:10;",
      chartStyle2: "width: 80%; height: 80%;display:none;",
      remart: "left",
      category: "A",
    },
    {
      id: null,
      storeIndex: 1,
      name: "center1",
      path: "./visualization/center1.vue",
      bgPath: "./visualization/bg/center1.vue",
      containerStyle:
        "height:100px;width:40%;overflow:hidden;position:absolute;top:10px;left:30%;z-index:10;",
      chartStyle: "width: 80%; height: 80%;display:none;",
      containerStyle2:
        "height:100px;width:40%;overflow:hidden;position:absolute;top:10px;left:30%;z-index:10;",
      chartStyle2: "width: 80%; height: 80%;display:none;",
      remart: "center",
      category: "A",
    },
    {
      id: null,
      storeIndex: 2,
      name: "view2",
      path: "./visualization/view2.vue",
      bgPath: "./visualization/bg/view2_a.vue",
      containerStyle:
        "height:580px;width:40%;overflow:hidden;position:absolute;top:90px;left:30%;z-index:10;",
      chartStyle: "width: 80%; height: 80%;",
      containerStyle2:
        "height:580px;width:40%;overflow:hidden;position:absolute;top:90px;left:30%;z-index:10;",
      chartStyle2: "width: 80%; height: 80%;",
      remart: "center",
      category: "A",
    },
    {
      id: null,
      storeIndex: 3,
      name: "center3",
      path: "./visualization/left3.vue",
      bgPath: "./visualization/bg/left3.vue",
      containerStyle:
        "height:400px;width:40%;position:absolute;top:680px;left:30%;z-index:10;",
      chartStyle: "width: 80%; height: 80%;display:none;",
      containerStyle2:
        "height:400px;width:40%;position:absolute;top:680px;left:30%;z-index:10;",
      chartStyle2: "width: 80%; height: 80%;display:none;",
      remart: "center",
      category: "A",
    },
    {
      id: null,
      storeIndex: 1,
      name: "right1",
      path: "./visualization/right1.vue",
      bgPath: "./visualization/bg/right1.vue",
      containerStyle:
        "height:400px;width:30%;position:absolute;top:80px;left:70%;z-index:10;",
      chartStyle: "width: 80%; height: 80%;display:none;",
      containerStyle2:
        "height:400px;width:30%;position:absolute;top:80px;left:70%;z-index:10;",
      chartStyle2: "width: 80%; height: 80%;display:none;",
      remart: "center",
      category: "A",
    },
    {
      id: null,
      storeIndex: 3,
      name: "right2",
      path: "./visualization/left3.vue",
      bgPath: "./visualization/bg/right2.vue",
      containerStyle:
        "height:300px;width:30%;position:absolute;top:380px;left:70%;z-index:10;overflow:hidden;",
      chartStyle: "width: 80%; height: 70%;display:none;",
      containerStyle2:
        "height:300px;width:30%;position:absolute;top:380px;left:70%;z-index:10;overflow:hidden;",
      chartStyle2: "width: 80%; height: 70%;display:none;",
      remart: "left",
      category: "A",
    },

    {
      id: null,
      storeIndex: 3,
      name: "right2",
      path: "./visualization/left3.vue",
      bgPath: "./visualization/bg/right2.vue",
      containerStyle:
        "height:300px;width:30%;position:absolute;top:380px;left:70%;z-index:10;overflow:hidden;",
      chartStyle: "width: 80%; height: 70%;display:none;",
      containerStyle2:
        "height:300px;width:30%;position:absolute;top:380px;left:70%;z-index:10;overflow:hidden;",
      chartStyle2: "width: 80%; height: 70%;display:none;",
      remart: "left",
      category: "A",
    },
    {
      id: null,
      storeIndex: 3,
      name: "right3",
      path: "./visualization/right3.vue",
      bgPath: "./visualization/bg/right3.vue",
      containerStyle:
        "height:300px;width:30%;position:absolute;top:680px;left:70%;z-index:10;",
      chartStyle: "width: 92%; height: 90%;margin-left:15px;margin-top:20px;",
      containerStyle2:
        "height:300px;width:30%;position:absolute;top:680px;left:70%;z-index:10;",
      chartStyle2: "width: 92%; height: 90%;margin-left:15px;margin-top:20px;",
      remart: "right",
      category: "A",
    },
  ];
  Http.post("/largeScreen/echartsStore/initData", { dataStr: JSON.stringify(initData)}).then(
    (res) => {
      console.log("res", res);
    }
  );
};


</script>
<style scoped>

</style>
